<template>
  <view class="min-h-screen bg-gray-100">
    <!-- 状态标签页 -->
    <view class="bg-white p-3 sticky top-76 z-9">
      <view class="flex overflow-x-auto pb-2 gap-2">
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === 'all'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('all')"
          >所有</view
        >
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === 'initiated'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('initiated')"
          >已发起</view
        >
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === 'processing'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('processing')"
          >处理中</view
        >
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === 'completed'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('completed')"
          >已完成</view
        >
      </view>
    </view>

    <!-- 工单列表 -->
    <view class="m-3 rounded-lg overflow-hidden">
      <!-- 使用v-for动态渲染工单数据 -->
      <view
        v-for="order in workOrders"
        :key="order.id"
        class="p-4 last:border-b-0 mb-1 bg-white rounded"
      >
        <view class="flex justify-between items-start mb-2">
          <view class="font-medium">报修部门: {{ order.department }}</view>
          <view :class="getStatusStyle(order.status)" class="text-sm">
            {{ getStatusText(order.status) }}
          </view>
        </view>
        <view class="grid grid-cols-2 gap-y-2 text-sm text-gray-600 mb-3">
          <view>资产名称: {{ order.assetName }}</view>
          <view>工单编号: {{ order.orderNo }}</view>
          <view>故障说明: {{ order.description }}</view>
          <view>报修地址: {{ order.address }}</view>
        </view>
        <view class="flex justify-between items-center text-xs text-gray-500">
          <view>发起时间: {{ order.createTime }}</view>
          <view v-if="order.reporter" class="flex items-center gap-1">
            <text>{{ order.reporter }}</text>
            <i class="uil-user-circle"></i>
          </view>
          <view
            v-else-if="getStatusIcon(order.status)"
            :class="getStatusStyle(order.status)"
          >
            <i :class="getStatusIcon(order.status)"></i>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 定义工单接口
interface WorkOrder {
  id: string
  department: string
  assetName: string
  orderNo: string
  description: string
  address: string
  createTime: string
  status:
    | 'initiated'
    | 'pending'
    | 'processing'
    | 'paused'
    | 'completed'
    | 'cancelled'
  reporter?: string
}

// 模拟工单数据
const workOrders = ref<WorkOrder[]>([
  {
    id: '1',
    department: '公司名称1',
    assetName: '2M机械99',
    orderNo: 'WX202201200001',
    description: '风机不转，电脑不显示画面，无法开机运行!',
    address: '广州市天河区天河路555号地中海大厦A座801',
    createTime: '2022-10-12 08:20:00',
    status: 'initiated',
    reporter: '报修人名称1'
  },
  {
    id: '2',
    department: '公司名称1',
    assetName: '2M机械98',
    orderNo: 'WX202201200002',
    description: '风机不转，电脑不显示画面，无法开机运行!',
    address: '广州市天河区天河路555号地中海大厦A座801',
    createTime: '2022-10-12 08:20:00',
    status: 'pending'
  },
  {
    id: '3',
    department: '公司名称1',
    assetName: '2M机械99',
    orderNo: 'WX202201200001',
    description: '风机不转，电脑不显示画面，无法开机运行!',
    address: '广州市天河区天河路555号地中海大厦A座801',
    createTime: '2022-10-12 08:20:00',
    status: 'processing'
  },
  {
    id: '4',
    department: '公司名称1',
    assetName: '2M机械99',
    orderNo: 'WX202201200001',
    description: '风机不转，电脑不显示画面，无法开机运行!',
    address: '广州市天河区天河路555号地中海大厦A座801',
    createTime: '2022-10-12 08:20:00',
    status: 'paused'
  }
])

// 获取状态样式
const getStatusStyle = (status: WorkOrder['status']) => {
  const styles = {
    initiated: 'text-red-500',
    pending: 'text-orange-500',
    processing: 'text-blue-500',
    paused: 'text-gray-500',
    completed: 'text-green-500',
    cancelled: 'text-gray-400'
  }
  return styles[status]
}

// 获取状态文本
const getStatusText = (status: WorkOrder['status']) => {
  const texts = {
    initiated: '已发起',
    pending: '待作业',
    processing: '处理中',
    paused: '已暂停',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status]
}

// 获取状态图标
const getStatusIcon = (status: WorkOrder['status']) => {
  const icons = {
    initiated: '',
    pending: 'uil-exclamation-circle',
    processing: 'uil-spinner-alt animate-spin',
    paused: 'uil-pause-circle',
    completed: '',
    cancelled: ''
  }
  return icons[status]
}

// 添加当前状态的响应式变量
const currentStatus = ref<'all' | 'initiated' | 'processing' | 'completed'>(
  'all'
)

// 设置当前状态的函数
const setCurrentStatus = (
  status: 'all' | 'initiated' | 'processing' | 'completed'
) => {
  currentStatus.value = status
}
</script>

<style lang="scss" scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>
